<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义一个根标签 -->
    <div id="root"></div>
    <!-- 2. 引入react和react-dom -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>

    <script type="text/babel">
      // 什么是组件? 组件是react中提供了一个可以封装html结构的技术
      // 为什么要用组件?
      // 因为项目页面中存在着大量的重复的html结构.传统的处理方式就是cv.不利于后期维护.所以我们就希望能够将重复的html结构像js那样通过函数封装起来,哪里需要哪里调用.组件刚好就可以帮我们实现这个功能
      // 组件分类:
      // 1. 函数组
      // 2. 类组件

      // 定义一个函数组件
      // 要求: 1. 组件首字母大写 2. 函数中必须写return 3. return后面一般写jsx.如果没有结构要封装,可以return null
      function Test() {
        return <div>我是一个test组件</div>
      }

      // 定义类组件
      // 要求: 1. 组件首字母大写 2. 必须继承React.Component 3. 必须写render函数 4. render中必须写return 4. return后面一般写jsx.如果没有结构要封装,可以return null
      class Demo extends React.Component {
        render() {
          return <div>我是一个demo组件</div>
        }
      }

      const div = (
        <div>
          {/*使用组件: 使用组件相当于就是 new Test().但是我们不能自己new */}
          {/*单标签和双标签都一样*/}
          <Test />
          <Test></Test>
          <Demo />
          <Demo></Demo>
        </div>
      )
      ReactDOM.createRoot(document.getElementById('root')).render(div)
    </script>
  </body>
</html>
